---
title: Hooks
---

# Hooks

Theme UI includes hooks for changing the color mode state and for using the Theme UI context directly.

<Note>

To learn more about how React Hooks work, please see the [official React docs](https://reactjs.org/docs/hooks-intro.html).

</Note>

## `useThemeUI`

To access the `context` object directly in a component, use the `useThemeUI` hook.

```jsx
import { useThemeUI } from 'theme-ui'

export default (props) => {
  const context = useThemeUI()
  const { theme, components, colorMode, setColorMode } = context

  return <pre>{JSON.stringify(theme, null, 2)}</pre>
}
```

## `useColorMode`

To change the color mode state in your application, use the `useColorMode` hook.

```jsx
import { useColorMode } from 'theme-ui'

export default (props) => {
  const [colorMode, setColorMode] = useColorMode()
  return (
    <button
      onClick={(e) => {
        setColorMode(colorMode === 'light' ? 'dark' : 'light')
      }}>
      Toggle {colorMode === 'light' ? 'Dark' : 'Light'}
    </button>
  )
}
```

Learn more in the [color modes docs](/color-modes).
